import {
  Card,
  Form,
  Input,
  Table,
  Button,
  Space,
  Popconfirm,
  message,
  Modal,
} from "antd";
import {
  PlusOutlined,
  SearchOutlined,
  EditOutlined,
  QuestionCircleOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import "../../styles/SwipeList.scss";
import { useEffect, useState } from "react";
import UploadImg from "../Swipe/UploadImg";
import { dalImg } from "../../utils/tools";
import {
  addShop,
  delShop,
  getShop,
  getShopById,
  getShopSort,
  putShop,
} from "../../api/shop";
import { Select } from "antd";
//引入富文本编辑器
import MyEditor from "./Editor";
function ShopList() {
  const { Option } = Select;
  //获取每行的数据
  const [dataScource, setDataScource] = useState([]);
  //图片上传
  const [imageUrl, setImageUrl] = useState("");
  //当前数据的id
  const [currentId, setCurrentId] = useState("");
  //价格
  const [price, setPrice] = useState(0);
  //库存
  const [num, setNum] = useState(0);
  //分类
  const [sort, setSort] = useState([]);
  //控制模态框的显示
  const [show, setShow] = useState(false);
  //分页查询
  const [query, setQuery] = useState({});
  const [total, setTotal] = useState(0);
  //分类数据
  useEffect(() => {
    getShopSort({}).then((res) => {
      console.log(res.data);
      setSort(res.data.data);
    });
  }, []);
  //获取表单组件
  const [myForm] = Form.useForm();
  const getData = () => {
    getShop(query).then((res) => {
      console.log(res.data.data);
      setDataScource(res.data.data);
      // setDataScource(
      //   res.data.data.map((item: any) => {
      //     return { ...item };
      //   })
      // );
      setTotal(res.data.total);
      //console.log(query);
    });
  };
  //监听query中page变化， 重新请求数据
  useEffect(() => {
    getData();
  }, [query]);
  //清空数据，让下一次判断是否是新增还是修改，从新进行
  useEffect(() => {
    if (!show) {
      setCurrentId("");
      setImageUrl("");
      setPrice(0);
      setNum(0);
    }
  }, [show]);
  //表格中每一列的内容
  const columns = [
    {
      title: "序号",
      render(text: any, record: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "名字",
      dataIndex: "name",
    },
    {
      title: "分类",
      render(v: any) {
        return <span>{v.category.name}</span>;
      },
    },
    {
      title: "图片",
      render(v: any) {
        return (
          <img
            src={dalImg(v.coverImage)}
            style={{ width: "60px", maxHeight: "80px" }}
          />
        );
      },
    },
    {
      title: "价格",
      dataIndex: "price",
    },
    {
      title: "库存",
      dataIndex: "amount",
    },
    {
      title: "操作",
      // 生成复杂数据的渲染函数，参数分别为当前行的值(id:2,name:"")，当前行数据，行索引
      //删除数据
      render(text: any) {
        return (
          <Space>
            <Button
              //修改数据
              icon={<EditOutlined />}
              onClick={async () => {
                const data = await getShopById(text.id);
                console.log(data.data);
                // { note: 'Hi, man!' }
                myForm.setFieldsValue(data.data);
                //修改数据时，让表单原有数据显示出来。
                setImageUrl(data.data.coverImage); //存图片路径
                setCurrentId(data.data.id); //存当前id
                setShow(true);
              }}
            ></Button>
            <Popconfirm
              title="是否确定删除该条数据?"
              icon={<QuestionCircleOutlined style={{ color: "red" }} />}
              // 	点击确认的回调
              onConfirm={async () => {
                // 删除数据
                await delShop(text.id);
                message.success("删除成功！");
                //删除数据后重新渲染页面
                getData();
              }}
            >
              <Button danger icon={<DeleteOutlined />}></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <div className="swipe">
      <Card
        title="商品管理"
        // 卡片右上角操作区
        extra={
          <Space>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              //控制模态框的显示
              onClick={() => setShow(true)}
            ></Button>
          </Space>
        }
      >
        {/* 插入一个表单 */}
        {/* 把表单内的元素变成行内元素 根据名字搜索*/}
        <Form
          layout="inline"
          //onFinish 提交表单且数据验证成功后回调事件
          onFinish={(v) => {
            //v表示代表输入框的值
            console.log(v);
            setQuery({
              page: 1,
              name: v.name,
            });
          }}
        >
          <Form.Item name="name">
            <Input placeholder="请输入名字" />
          </Form.Item>
          <Form.Item>
            {/* 提交input框的内容 */}
            <Button
              htmlType="submit"
              icon={<SearchOutlined />}
              type="primary"
            ></Button>
          </Form.Item>
        </Form>
        {/* 插入一个表格 */}
        <Table
          bordered
          //为每一项子元素加key值
          rowKey="id"
          style={{ marginTop: "15px" }}
          // 表格的每一列内容
          columns={columns}
          // 每一行的数据
          dataSource={dataScource}
          // 分页
          pagination={{
            total, // 总数量
            //快速跳转到分页
            showQuickJumper: true,
            //是否展示 pageSize 切换器
            showSizeChanger: true,
            //控制每页显示多少条
            pageSizeOptions: [5, 10, 15, 20],
            //分页改变page是页码，per是分页的数量
            onChange(page, pageSize) {
              //console.log(total, page, per);
              //更改页面显示数量之前，清空dataScource数据
              setDataScource([]),
                setQuery({
                  ...query,
                  page: page,
                  per: pageSize,
                });
            },
          }}
        ></Table>
        {/* 表格 */}
      </Card>
      <Modal
        //强制渲染
        //forceRender
        getContainer={false}
        //实现关闭模态框，清空上一次的数据，需要用到destroyOnClose配合form表单使用，form表单要加一个preserve={false}
        destroyOnClose
        //title标题
        title={currentId ? "修改数据" : "新增数据"}
        //控制显示
        open={show}
        //点击“X”或取消，以及空白区域关闭
        onCancel={() => setShow(false)}
        //onOk点击确定按钮的回调
        //validateFields触发表单验证then成功的回调，catch错误的回调
        onOk={() =>
          myForm
            .validateFields()
            .then(async (values) => {
              //根据currentId是否存在，判断模态框是新增还是修改
              console.log(values);
              if (currentId) {
                await putShop(currentId, {
                  ...values,
                  coverImage: imageUrl,
                });
              } else {
                await addShop({
                  ...values,
                  coverImage: imageUrl,
                });
              }
              setShow(false);
              getData();
            })
            .catch((error) => {
              console.log(error);
            })
        }
      >
        <Form
          //实现模态框关闭，清空数据
          preserve={false}
          //提交表单数据
          form={myForm}
          //标签布局设置
          labelCol={{ span: 3 }}
        >
          <Form.Item
            label="名字"
            //加个name会有*号
            name="name"
            //表单的校验规则，
            rules={[{ required: true, message: "请输入名字！" }]}
          >
            <Input placeholder="请输入名字"></Input>
          </Form.Item>
          <Form.Item label="图片">
            {/* 上传图片 */}
            <UploadImg
              //父传子，自定义属性
              imageUrl={imageUrl}
              setImageUrl={setImageUrl}
            ></UploadImg>
          </Form.Item>
          {/* 接口中必须传category属性（商品分类id）*/}
          <Form.Item
            label="分类"
            name="category"
            rules={[{ required: true, message: "请输入分类！" }]}
          >
            <Select placeholder="请选择" allowClear={true}>
              {/* allowclear支持清除文本框内容，默认为false*/}
              {/* <Option value={50}>全部</Option> */}
              {sort.map((item: any) => (
                <Option key={item.id} value={item.categoryId}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="详情" name="content">
            <MyEditor></MyEditor>
          </Form.Item>
          <Form.Item label="价格" name="price">
            <Input prefix="￥" suffix="元" placeholder="请输入价格" />
          </Form.Item>
          {/* 必须加name，表单才能获取内容 */}
          <Form.Item label="库存" name="amount">
            <Input placeholder="请输入库存" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default ShopList;
